<template>
	<gzPageWrapper
		ref="gzPageWrapperRef"
		:styles="{ background: '#f7f8fb' }"
		:up="{ textNoMore: '--暂无更多--', empty: { use: false } }"
		:down="{ use: true, auto: false }"
		:nav="{ use: false }"
		:scroll="{ top: 100, fixed: true }"
		@upCallback="upCallback"
	>
		<template #top>
			<uni-segmented-control class="uni-tab" :current="vdata.tabCurrent" :values="vdata.tabItems" @clickItem="onClickTabItem" styleType="text" activeColor="#00A952"></uni-segmented-control>
			<view class="reward-state">
				<text v-for="(item,index) in vdata.stateList" :key="index" :class="{ 'is-activate': vdata.currentState == index }" @tap="onStateChange(index)">{{ item }}</text>
			</view>
		</template>
		<template #default>
			<!-- 福分暂时不展示 -->
			<view v-if="vdata.tabCurrent == -1">
				<scoreList></scoreList>
			</view>
			
			<view v-else-if="vdata.tabCurrent == 0">
				<couponList :couponList="vdata.awardList"/>
			</view>
			
			<view v-else>
				<goodsList :useDataResult="[]"/>
			</view>
		</template>
	</gzPageWrapper>

</template>
<style lang="less" scoped>
	.reward-state{
		padding: 24rpx;
		font-size: 26rpx;
		color: #666666;
		display: flex;
		align-items: center;
		gap: 56rpx;
		position: fixed;
		top: 64rpx;
		left: 0;
		z-index: 999;
		background-color: #F7F8FB;
		width: 100%;
		box-sizing: border-box;
		
		.is-activate{
			font-weight: bold;
			font-size: 26rpx;
			color: #333333;
			background-color: #ECECEE;
			padding: 15rpx 20rpx;
			border-radius: 8rpx;
			border: 1rpx solid #DEDEE3;
		}
	}
	
	.uni-tab{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
	}
	:deep(.segmented-control) {
		background: #fff;
		padding-bottom: 10rpx;
	}
</style>
<script setup>
	import couponList from '../myCoupon/couponList.vue'
	import goodsList from '../myAward/goodsList.vue'
	import scoreList from '../scoreRecords/scoreList.vue'
	import { reactive, ref, watch } from 'vue'
	import storageManage from '@/util/storageManage.js'
	import { $couponList } from '@/http/apiManager.js'
	
	const gzPageWrapperRef = ref()
	
	const vdata = reactive({
		tabCurrent: 0,
		// tabItems: ['福分', '福券','实物奖品'],
		tabItems: ['福券','实物奖品'],
		// tabsList: ['福分','福券','实物奖品'],
		// 状态相关
		stateList: ['待激活','待使用','已核销','已过期'],
		couponStateList: ['待激活','待使用','已核销','已过期'], // 3 0 1 2	卡券
		goodsStateList: ['待使用','已核销','已过期'],	// 0 1 2	实物
		currentState: 0,
		awardList: [],	// 奖品列表
	})
	const params = reactive({
		awardType: 0,
		couponState: 3,
	})
	
	/**
	 * 切换状态
	 */
	function onStateChange(index){
		if(vdata.currentState == index) return;
		vdata.currentState = +index
		let couponState
		if(vdata.tabCurrent == 0){	// 卡券
			if(index == 0){
				couponState = 3
			}else if(index == 1){
				couponState = 0
			}else if(index == 2){
				couponState = 1
			}else if(index == 3){
				couponState = 2
			}
		}else if(vdata.tabCurrent == 1){	// 实物奖品
			couponState = +index
		}
		params.couponState = couponState
		// if(vdata.tabCurrent == 0){	// 卡券
		// 	// getCouponList({ couponState })
		// }else if(vdata.tabCurrent == 1){	// 实物
		// 	// getGoodsList({ couponState })
		// }
	}
	
	watch(params,()=>{
		gzPageWrapperRef.value.getMescroll().resetUpScroll()
	},{ deep: true })
	
	/**
	 * 跳转详情页
	 */
	function onToDetail(){
		uni.navigateTo({
			url: '/marketing/activity/detail'
		})
	}
	/**
	 * tab切换
	 */
	function onClickTabItem({ currentIndex }){
		if(vdata.tabCurrent == currentIndex) return;
		vdata.tabCurrent = currentIndex
		params.awardType = currentIndex
		
		if(vdata.currentState != 0){
			vdata.currentState = 0
		}
		if(currentIndex == 0){	// 微信券
			params.couponState = 3
			vdata.stateList = vdata.couponStateList
			// getCouponList({ couponState: 3 })
		}else if(currentIndex == 1){	// 实物
			params.couponState = 0
			vdata.stateList = vdata.goodsStateList
			// getGoodsList({ couponState: 3 })
		}
	}
	/**
	 * 上拉刷新
	 */
	function upCallback(mescroll){
		const { num, size } = mescroll
		const pageNumber = num ? num : 1
		const pageSize = size ? size : 10
		$couponList({ ...params, pageNumber, pageSize }).then(({ bizData }) => {
			if(pageNumber == 1) vdata.awardList = []
			vdata.awardList = vdata.awardList.concat(bizData.records)
			mescroll.endSuccess(bizData.records.length,bizData.hasNext)
		}).catch(() => {
			mescroll.endErr()
		})
	}
</script>

